<template>
  <div class="root">
    <nav>
      <section>
        <img src="http://www.songguolife.com/nuts/images/navLogo.png" alt="">
      </section>
      <section class="hamburger">
        <img v-if="btnHamburger == true" src="http://www.songguolife.com/nuts/images/nav_button_close.png"
             @click="closeHamburger" alt="">
        <img v-if="btnHamburger == false" src="http://www.songguolife.com/nuts/images/nav_button.png"
             @click="openHamburger" alt="">
      </section>
      <section id="select">
        <main>
          <div>
            <router-link to="/">
              <p>文章</p>
            </router-link>
          </div>
          <div>
            <router-link to="/activity">
              <p>活动</p>
            </router-link>
          </div>
          <div>
            <router-link to="/live">
              <p>连线</p>
            </router-link>
          </div>
          <div>
            <router-link to="/column">
              <p>课堂</p>
            </router-link>
          </div>
          <div @click="login">
            <router-link to="/">
              <p>登录</p>
            </router-link>
          </div>
          <div>
            <router-link to="/">
              <p>
                <img class="search" src="http://www.songguolife.com/nuts/images/search_default.png" alt="">
              </p>
            </router-link>
          </div>
        </main>
      </section>
    </nav>
    <div class="select-ul">
      <ul v-if="btnHamburger == true">
        <router-link to="/">
          <li>文章</li>
        </router-link>
        <router-link to="/activity">
          <li>活动</li>
        </router-link>
        <router-link to="/">
          <li>连线</li>
        </router-link>
        <router-link to="/">
          <li>课堂</li>
        </router-link>
        <router-link to="/">
          <li>登录</li>
        </router-link>
        <router-link to="/">
          <li>
            <p>
              <img class="search" src="http://www.songguolife.com/nuts/images/search_default.png" alt="">
              <span>搜索松果</span>
            </p>
          </li>
        </router-link>
      </ul>
    </div>
  </div>
</template>
<script>
  import bus from "../js/bus.js"
  export default {
    name: "",
    data() {
      return {
        btnHamburger: false
      }
    },
    methods: {
      openHamburger() {
        this.btnHamburger = true
      },
      closeHamburger() {
        this.btnHamburger = false
      },
      login(){
        bus.$emit("login")
      }
    }
  }
</script>
<style scoped>
  .root {
    border-bottom: 1px solid #ccc;
    background-color: #fff;
  }
  a {
    text-decoration: none;
    color: #000;
  }
  nav {
    width: 80%;
    height: 70px;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  nav section:nth-child(1) img {
    width: 100px;
  }
  section#select {
    width: 600px;
    height: 70px;
  }
  section#select main {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  #select main > div {
    flex-basis: 16.666%;
    text-align: center;
    font-size: 20px;
  }
  #select a {
    flex-basis: 16.666%;
    display: inline-block;
    height: 70px;
    line-height: 70px;

  }
  .search {
    width: 16px;
    height: 16px;
  }
  .hamburger img {
    width: 50px;
  }
  .select-ul {
    position: absolute;
    width: 100%;
    background-color: #fff;
  }
  .select-ul ul {
    width: 100%;
    margin: 0 auto;
    list-style: none;
    text-align: center;
  }
  .select-ul ul li:nth-child(1) {
    border-top: 1px solid #f3f3f3;
  }
  .select-ul ul li {
    padding: 12px 0;
    border-bottom: 1px solid #f3f3f3;
  }
  .select-ul ul li p {
    margin: 0 10px;
    border: 1px solid #ccc;
    border-radius: 3px;
    color: grey;
  }
  .select-ul ul li p img{
    position: relative;
    top: 3px;
  }
  @media (max-width: 700px) {
    section#select {
      display: none;
    }
    .hamburger {
      display: block;
    }

    .select-ul{
      display: block;
    }
  }

  @media (min-width: 700px) {
    .hamburger {
      display: none;
    }

    section#select {
      display: block;
    }
    .select-ul{
      display: none;
    }
  }
</style>
